<template>
    <div :class="piece ==='O'? 'green': 'red'" class="piece" @click="drop">
        {{piece}}  
    </div>
</template>

<script>
    export default {
        name:'Piece',
        props:['piece', 'num'],
        methods:{
            drop(){
                if(this.piece){
                    console.log('已经下过了')
                    return ;
                }
                this.$emit('drop', this.num)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .piece{
        width: 100px;
        height: 100px;
        border:1px solid #f00;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 60px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .red{
        color: red;
    }

    .green{
        color: green;
    }
</style>